﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
      <title>jQuery Mobile Web App</title>
      <link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
      <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
      <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>

      <style>
        .miboton{
        display:block;
        width: 80%;
        height:45px;
        background:red;
        border-radius: 5px;
        text-align:center;
        line-height:45px;
        color:#fff;
        }
      </style>
    </head>
  <body>


    <div data-role="page" id="inicio">
      <!-- encabezado -->
      <div data-role="header">
        <h1> Inicio </h1>
      </div>

      <!-- contenido -->
      <div data-role="content">
        Hola mundo jquery mobile

        <a href="#otro" data-role="button" > ver otra pantalla</a>


        <div class="miboton" id="mibotoncete">
          Mi boton
        </div>

      </div>

      <!-- navegacion -->

      <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
          <ul>
            <li>
              <a href="#otro"> catalogo </a>
            </li>
            <li>
              <a href="#tres"> nuevo </a>
            </li>
            <li>
              <a href="#dos"> dos </a>
            </li>
          </ul>
        </div>
      </div>

    </div>



    <div data-role="page" id="otro">

      <div data-role="header" data-position="fixed">
        <h1> catalogo</h1>
      </div>

      <ul data-role="listview">
        <li>
          <a href="#dos" onClick="cambiar('snacks')">Snacks</a>
        </li>
        <li>
          <a href="#dos">licores</a>
        </li>
        <li>
          <a href="#dos">carnes</a>
        </li>
        <li>
          <a href="#dos">lacteos</a>
        </li>
        <li>
          <a href="#dos">Cigarrillos</a>
        </li>
        <li>
          <a href="#dos">Inka cola</a>
        </li>
        <li>
          <a href="#dos">verduras</a>
        </li>
        <li>
          <a href="#dos">Electronicos</a>
        </li>
        <li>
          <a href="#dos">Mascotas</a>
        </li>
        <li>
          <a href="#dos" onClick="cambiar('snacks')">Snacks</a>
        </li>
        <li>
          <a href="#dos">licores</a>
        </li>
        <li>
          <a href="#dos">carnes</a>
        </li>
        <li>
          <a href="#dos">lacteos</a>
        </li>
        <li>
          <a href="#dos">Cigarrillos</a>
        </li>
        <li>
          <a href="#dos">Inka cola</a>
        </li>
        <li>
          <a href="#dos">verduras</a>
        </li>
        <li>
          <a href="#dos">Electronicos</a>
        </li>
        <li>
          <a href="#dos">Mascotas</a>
        </li>
        <li>
          <a href="#dos" onClick="cambiar('snacks')">Snacks</a>
        </li>
        <li>
          <a href="#dos">licores</a>
        </li>
        <li>
          <a href="#dos">carnes</a>
        </li>
        <li>
          <a href="#dos">lacteos</a>
        </li>
        <li>
          <a href="#dos">Cigarrillos</a>
        </li>
        <li>
          <a href="#dos">Inka cola</a>
        </li>
        <li>
          <a href="#dos">verduras</a>
        </li>
        <li>
          <a href="#dos">Electronicos</a>
        </li>
        <li>
          <a href="#dos">Mascotas</a>
        </li>
        <li>
          <a href="#dos" onClick="cambiar('snacks')">Snacks</a>
        </li>
        <li>
          <a href="#dos">licores</a>
        </li>
        <li>
          <a href="#dos">carnes</a>
        </li>
        <li>
          <a href="#dos">lacteos</a>
        </li>
        <li>
          <a href="#dos">Cigarrillos</a>
        </li>
        <li>
          <a href="#dos">Inka cola</a>
        </li>
        <li>
          <a href="#dos">verduras</a>
        </li>
        <li>
          <a href="#dos">Electronicos</a>
        </li>
        <li>
          <a href="#dos">Mascotas</a>
        </li>
      </ul>



    </div>

    <div data-role="page" id="dos" data-add-back-btn="true" >
      <div data-role="header">
        <h1 id="titulo1"> Producto X </h1>
      </div>



      <a href="#otro" data-role="button" > ver otra pantalla</a>

    </div>

    <div data-role="page" id="tres" data-add-back-btn="true" >

      <div data-role="content">
        <form>

          <input type="text" id="nombreProducto" placeholder=" Nombre del producto " />


          <input type="tel" id="codigoProducto" placeholder="codigo del producto" />

          <label> tipo </label>
          <select>
            <option> licor </option>
            <option> cigarros </option>
            <option> otros </option>
          </select>

          <input type="submit" value="enviar" />



        </form>
      </div>

    </div>


    <script>
      var titulo = "defecto"

      function cambiar(_nombre){
      titulo =_nombre
      }

      $("#mibotoncete").bind("tap", function(){
      cambiar("calato")
      $.mobile.changePage("#dos")
      })

      $("#dos").bind("pagebeforeshow", function(a, b){
      //alert(" muestra la pagnia")

      $("#titulo1").html(titulo)
      console.log(b)

      })

      $("#dos").bind("pagehide", function(){
      //alert(" muestra la pagnia")

      $("#titulo1").html(titulo)

      })

    </script>

  </body>
</html>
